<template>
  <div class="app-container">
    <aside>Jenkins 发布执行</aside>
    <el-divider></el-divider>


  <div class="app-container">
    <div v-if="user">
      <el-row :gutter="20">

        <el-col :span="6" :xs="24">


              <el-card style="margin-bottom:20px;">
                <div slot="header" class="clearfix">
                  <span>Jenkins Rule</span>
                </div>


                <div class="user-bio">
                  <div class="user-education user-bio-section">
                    <div class="user-bio-section-body">
                      <div class="text-muted">
                        Jenkins 执行发布任务后与业务环境进行联调
                      </div>
                    </div>
                  </div>

                </div>
              </el-card>



        </el-col>

        <el-col :span="18" :xs="24">
          <el-card>
            <el-tabs v-model="activeTab">
              <el-tab-pane label="规则列表" name="activity">
                <activity />
              </el-tab-pane>
              <el-tab-pane label="添加规则" name="account">
                <account :user="user" />
              </el-tab-pane>
            </el-tabs>
          </el-card>
        </el-col>

      </el-row>
    </div>
  </div>



  </div>
</template>

<script>
import { fetchList } from '@/api/ansibleui'
import Sortable from 'sortablejs'
import { mapGetters } from 'vuex'

import UserCard from '../profile/components/UserCard'
import Activity from '../profile/components/Activity'
import Timeline from '../profile/components/Timeline'
import Account from '../profile/components/Account'
export default {
  components: { UserCard, Activity, Timeline, Account },
  data() {
    return {
      activeTab: 'activity'
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'avatar',
      'roles'
    ])
  },
  created() {
    this.getUser()
  },
  methods: {
    getUser() {
      this.user = {
        name: this.name,
        role: this.roles.join(' | '),
        email: 'admin@test.com',
        avatar: this.avatar
      }
    }
  }
}
  

</script>

<style>
.sortable-ghost{
  opacity: .8;
  color: #fff!important;
  background: #42b983!important;
}
</style>

<style scoped>



.icon-star{
  margin-right:2px;
}
.drag-handler{
  width: 20px;
  height: 20px;
  cursor: pointer;
}
.show-d{
  margin-top: 15px;
}
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

</style>
